<template>
  <div class="w w-card">
    <!-- 标题 -->
    <div class="title">
      <h1>全部讲师</h1>
      <div class="title-desc">
        共找到
        <em class="title-count">{{ total }}</em>
        个结果
      </div>
    </div>
    <!-- 无数据 -->
    <div v-if="total == 0" class="w-100%">
      <svg-icon
        name="sour_face"
        class="svg"
        width="150px"
        height="150px"
      ></svg-icon>
      <span class="f-c-c mt-5 color-#909399">暂无讲师，请稍后再试~</span>
    </div>
    <!-- 讲师列表 -->
    <div class="teacher-list" v-else>
      <div
        class="teacher-item"
        v-for="teacher in teacherList"
        :key="teacher.teacherId"
      >
        <router-link :to="`/teacher/${teacher.teacherId}`">
          <div class="teacher-item-img">
            <img :src="teacher.avatar" alt="讲师头像" width="120" />
          </div>
          <div class="name">
            {{ teacher.name }}
          </div>
          <div class="level">
            {{ teacher.level == '0' ? '高级讲师' : '首席讲师' }}
          </div>
          <div class="intro">
            <el-text line-clamp="3">{{ teacher.intro }}</el-text>
          </div>
        </router-link>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqTeacherAllData } from '@/api/teacher'
import { Teacher } from '@/api/teacher/type'

let total = ref<number>(0)
let pageNum = ref<number>(1)
let pageSize = ref<number>(12)
let teacherList = ref<Teacher[]>([])

const getAllTeacher = async () => {
  let result = await reqTeacherAllData()
  teacherList.value = result.rows
  total.value = result.total
}
onMounted(() => {
  getAllTeacher()
})
</script>

<style lang="scss" scoped>
.title {
  height: 24px;
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  h1 {
    font-size: 16px;
    font-weight: 600;
  }
  .title-desc {
    font-size: 16px;
    .title-count {
      font-weight: 600;
      color: #14171a;
      font-style: normal;
    }
  }
}

.teacher-list {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  .teacher-item {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 80, 179, 0.08);
    transition: all 0.2s linear;
    &:hover {
      color: #2080f7;
      box-shadow: 0 8px 30px rgba(0, 80, 179, 0.12);
    }
    &:hover .teacher-item-img img {
      // border-color: #15c288;
      border-color: #2081f7;
    }
    &:hover .intro {
      border-color: #2081f7;
    }
    &:hover .intro:after {
      border-bottom-color: #2081f7;
    }
    .teacher-item-img {
      display: flex;
      justify-content: center;
      margin: 16px 0;
      img {
        border: 4px solid #ddd;
        transition: all 0.2s linear;
      }
    }
    .name {
      text-align: center;
    }
    .level {
      text-align: center;
      color: #999;
      height: 20px;
      margin-top: 3px;
    }
    .intro {
      margin-top: 10px;
      padding: 16px;
      color: #999;
      background-color: #f2f3f3;
      border-top: 2px solid #ddd;
      position: relative;
      line-height: 20px;
      height: 60px;
      &:after {
        content: '';
        width: 0px;
        height: 0px;
        position: absolute;
        left: 50%;
        top: -16px;
        margin-left: -8px;
        display: inline-block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        vertical-align: middle;
        border-bottom-color: #ddd;
      }
    }
  }
}
.pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
